React에서 만든 별점 등록기

✒️ 2025-05-16 12:34 내용 수정

• React와 react-bootstrap-icons를 사용하여 마우스가 들어오거나 나갈 때, 마우스를 클릭할 때 별점이 채워지는 별점 등록기이다.
• <StarFill/>은 react-bootstrap-icons component로, boostrap-icons 사이트에서 여러 아이콘을 불러와서 사용할 수 있다.
  • Bootstrap#React bootstrap 참고.
• onClick(), onMouseEnter(), onMouseLeave() 이벤트 처리를 사용하여 마우스의 액션에 따라 <StarFill/>의 스타일을 변경한다.
• 전체 별 개수와 평점 별 개수를 사용하여 javascript의 Array.from() 메소드를 사용하여 특정 길이의 유사 배열을 만들어 배열을 포함한 태그를 반환한다.
  • 배열#Array 생성 참고.

1. 마우스를 올려 놓거나 마우스가 나갈 때 별점 채워짐 처리

// 마우스가 들어오고 나갈 때 처리
import { useState } from "react";
import { StarFill } from "react-bootstrap-icons";

function StarSelect() {
        const totalStar = 5;
        const [hoverIndex, setHoverIndex] = useState(-1);
        const [score, setScore] = useState(0);

        const defaultStyle = { color: '#bebdbd' } // 짙은 노란색
        const hoverStyle = { color : '#FFC100' } // 회색
    
        function handleMouseEnter(index) { // 마우스 올려 놓을 때 색 바뀌기 처리
             setHoverIndex(index);
        }
        
        function handleMouseLeave() { // 마우스 벗어날 때 색 바뀌기 처리
            setHoverIndex(-1);
        }

        const star = Array.from({length:totalStar}, (_, index) => ( // element는 사용 안하므로 "_" 표시
            <StarFill 
            key={index} 
            {/* 현재의 인덱스가 hover 인덱스보다 작으면 스타일을 다르게 적용한다. */}
            style={index <= hoverIndex ? hoverStyle : defaultStyle} 
            onMouseEnter={()=>{handleMouseEnter(index)}}
            onMouseLeave={handleMouseLeave}
			}
            />
        ));
    
        return(
            <div>
                {star}
            </div>
        )
}

export default StarSelect;

2. 마우스로 별을 클릭했을 때 별점 채워짐 처리

// 마우스 클릭 시 처리
import { useState } from "react";
import { StarFill } from "react-bootstrap-icons";

function StarSelect() {
        const totalStar = 5;
        const [hoverIndex, setHoverIndex] = useState(-1);
        const [score, setScore] = useState(0);

        const defaultStyle = { color: '#bebdbd' } // 짙은 노란색
        const hoverStyle = { color : '#FFC100' } // 회색
    
        function handleClick(index) { // 클릭 처리
            setScore(index + 1); // 클릭한 위치의 인덱스를 저장한다.
            setHoverIndex(index); // hover 인덱스를 저장하여 스타일을 변경에 사용한다.
        }

        const star = Array.from({length:totalStar}, (_, index) => ( // element는 사용 안하므로 "_" 표시
            <StarFill 
            key={index} 
            {/* 현재의 인덱스가 hover 인덱스보다 작으면 스타일을 다르게 적용한다. */}
            style={index <= hoverIndex ? hoverStyle : defaultStyle} 
            onClick={()=>{handleClick(index)}}
            />
        ));
    
        return(
            <div>
                {star}
            </div>
        )
}

export default StarSelect;

• 4번째 별을 클릭/마우스가 들어왔을 때 4번째 요소까지 rgb값이 노란색 계열로 설정되어 있다.

• 2번째 별을 클릭/마우스가 들어왔을 때 2번째 요소까지 rgb값이 노란색 계열로 설정되어 있다.